<template>
  <e-container>
    <div class="title">
      <a-space :size="24">
        <a-button size="small" @click="() => router.push({ name: 'Client Contact', params: { id: route.params.id } })">
          <template #icon>
            <e-icon type="Aright" />
          </template>
        </a-button>
        <span>
          <e-icon type="Contactdetails" font-size="18px" color="#818d9f" style="margin-right: 8px" />
          {{ contact.raw.value.contactName }}
        </span>
      </a-space>
      <a-space>
        <a-button
          v-permission="'Contact:Delete'"
          type="link"
          size="small"
          style="color: #fc4b3b"
          @click="handleCheckDelete">
          <a-space>
            <e-icon type="delete" line-height="22px" />
            Delete
          </a-space>
        </a-button>
        <a-button
          v-permission="'Contact:Edit'"
          type="link"
          size="small"
          @click="
            () =>
              router.push({
                name: 'Contact Edit',
                params: { id: route.params.id, action: 'edit', contactId: route.params.contactId }
              })
          ">
          <a-space>
            <e-icon type="edit" line-height="22px" />
            Edit
          </a-space>
        </a-button>
      </a-space>
    </div>
    <div class="table">
      <a-row>
        <a-col :span="4" class="cell field">Gender</a-col>
        <a-col :span="8" class="cell value">{{ contact.transformed.value.gender }}</a-col>
        <a-col :span="4" class="cell field">Title</a-col>
        <a-col :span="8" class="cell value">{{ Utils.transformNullValue(contact.raw.value.title) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">E-mail</a-col>
        <a-col :span="20" class="cell value">{{ Utils.transformNullValue(contact.raw.value.email) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Type</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.transformed.value.contactType) }}
        </a-col>
        <a-col :span="4" class="cell field">Office phone</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.raw.value.officePhone) }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Main contact</a-col>
        <a-col :span="8" class="cell value">{{ contact.raw.value.isPrimaryContact ? 'Yes' : 'No' }}</a-col>
        <a-col :span="4" class="cell field">Mobile Phone</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.raw.value.cellPhone) }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Department</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.raw.value.department) }}
        </a-col>
        <a-col :span="4" class="cell field">Country/Region</a-col>
        <a-col :span="8" class="cell value">
          <e-country-or-region :code="contact.raw.value.countryID" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Invoice File</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.transformed.value.rFinancialMailType, true) }}
        </a-col>
        <a-col :span="4" class="cell field">City/State</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.raw.value.city) }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Preferred IM</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.transformed.value.im, true) }}
        </a-col>
        <a-col :span="4" class="cell field">Perferred IM's Account</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.raw.value.imAccount) }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Hobbies</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.raw.value.hobbies) }}
        </a-col>
        <a-col :span="4" class="cell field">Zip Code</a-col>
        <a-col :span="8" class="cell value">
          {{ Utils.transformNullValue(contact.raw.value.postalCode) }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Personality</a-col>
        <a-col :span="20" class="cell value">
          {{ Utils.transformNullValue(contact.raw.value.personality) }}
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Address</a-col>
        <a-col :span="20" class="cell value">{{ Utils.transformNullValue(contact.raw.value.address) }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="cell field">Remark</a-col>
        <a-col :span="20" class="cell value">{{ Utils.transformNullValue(contact.raw.value.comment) }}</a-col>
      </a-row>
    </div>
  </e-container>
</template>

<script setup>
import { inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import EContainer from '@/components/EContainer.vue'
import ECountryOrRegion from '@/components/ECountryOrRegion.vue'
import EIcon from '@/components/EIcon.vue'
import { useContactInfo } from '@/pages/Client/hooks/useContactInfo.js'
import Utils from '@/utils'
import { CONTACT_DELETE_SUCCESS, SURE_TO_DELETE } from '@/constants/message.js'
import Contact from '@/api/client/contact.js'
const { Modal, message } = inject('Feedback')
const router = useRouter()
const route = useRoute()
const { id, contactId } = route.params
const { contact, reload } = useContactInfo(contactId, () => {}, true)
const emits = defineEmits(['updated'])
const handleCheckDelete = () => {
  Modal.confirm({
    content: SURE_TO_DELETE,
    okButtonProps: { danger: true },
    okText: 'Confirm',
    onOk: () => {
      Contact.softDelete(contactId).then(res => {
        if (!res.data) {
          message.warning(res.message)
        } else {
          message.success(CONTACT_DELETE_SUCCESS)
          emits('updated')
          router.replace({ name: 'Client Contact', params: { id: id } })
        }
      })
    }
  })
}
</script>

<style lang="less" scoped>
.title {
  color: @black-85p;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
@border: 1px solid @lighter-gray;
.table {
  border: @border;
  margin-top: 18px;
  .cell {
    padding: 10px 14px;
    border-bottom: @border;
    border-right: @border;
    &:last-child {
      border-right: none;
    }
    &.field {
      background-color: @milk;
      color: @text-gray;
    }
  }
  .ant-row:last-child {
    .cell {
      border-bottom: none;
    }
  }
}
.delete {
  margin-top: 18px;
  text-align: right;
  :deep(.ant-checkbox-wrapper) {
    color: @text-gray;
  }
}
</style>
<route lang="yaml">
name: Contact Detail
path: '/client/:id/contact/:contactId/detail'
meta:
  title: Contact Detail
  permission: Contact
</route>
